<template>
  <div class="my-tags">
    <el-button :size="size" :type="mappingItem.type" :plain="!active" :round="round">{{ mappingItem.msg }}</el-button>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
      default: "default"
    },
    size: {
      type: String,
      default: "default"
    },
    active: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    mapping: {
      type: Array,
      required: false,
      default: [
        {
          type: "primary",
          data: "0",
          msg: "primary",
        }, {
          type: "success",
          data: "1",
          msg: "success",
        }, {
          type: "info",
          data: "2",
          msg: "info",
        }, {
          type: "warning",
          data: "3",
          msg: "warning",
        },
        {
          type: "danger",
          data: "4",
          msg: "danger",
        }
      ]
    }
  },
  watch: {
    "data": {
      handler(newVal) {
        this.initTag();
      }
    }
  },
  mounted() {
    this.initTag();
  },
  data() {
    return {
      mappingItem: {
        type: "info",
        data: "",
        msg: "null",
      },
    }
  },
  methods: {
    initTag() {
      this.mapping.forEach(value => {
        if (value.data == this.data) {
          this.mappingItem = value;
        }
      })
    }
  }
// <el-tag type="primary">Tag 1</el-tag>
// <el-tag type="success">Tag 2</el-tag>
// <el-tag type="info">Tag 3</el-tag>
// <el-tag type="warning">Tag 4</el-tag>
// <el-tag type="danger">Tag 5</el-tag>
}
</script>
<style scoped lang="scss">
.my-tags {
  user-select: none;
}
</style>